/**
 * @description  : 报表统计首页
 * @descriptionDetail : 报表统计首页
 * @copyright    : 河北烟草
 * @author       : mc
 * @create       : 
 */
<template>
  <view class="page report-index">
    <!-- #ifdef H5-ONLY -->
    <view>
      <u-navbar :back-text="navTitle"></u-navbar>
    </view>
    <!-- <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar> -->
    <!-- #endif -->
    <view class="content u-page">
      <!-- 内容区 -->
      <view class="tab">
        <view class="tab-item" :class="{active: tabIndex === 0}" @click="tabIndex = 0">内管总览</view>
        <view class="tab-item" :class="{active: tabIndex === 1}" @click="tabIndex = 1">报表</view>
      </view>
      <view class="tab-content" v-show="tabIndex === 0">
        <view class="tab-2">
          <view class="tab-item" :class="{active: outTabIndex === 0}" @click="outTabIndex = 0">卷烟外流总量</view>
          <view class="tab-item" :class="{active: outTabIndex === 1}" @click="outTabIndex = 1">查获省外流入总量</view>
        </view>
        
        <view v-show="outTabIndex === 0" class="tab-2-content">
          <view class="total-box">
            <view class="total">
              <text class="num">{{reportDatas.outflowNum}}</text>
              <text class="unit">万支</text>
            </view>
            <view class="item">
              <view class="num-box">
                <text class="num" style="font-size: 28rpx;">{{reportDatas.qgpm}}</text>
                <text class="unit"></text>
                <u-image class="arrow-icon" v-if="reportDatas.qgpmsjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                <u-image class="arrow-icon" v-if="reportDatas.qgpmsjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
              </view>
              <view class="desc">全国排名</view>
            </view>
            <view class="item">
              <view>
                <text class="num" style="font-size: 28rpx;">{{reportDatas.tb}}</text>
                <text class="unit">%</text>
              </view>
              <view class="desc">同比</view>
            </view>
          </view>
          <view class="card-box">
            <view class="title">各单位外流量分析</view>
            <view class="analysis" style="border-bottom: 0;">
              <view class="item">
                <view>
                  <text class="num">{{reportDatas.gdwwll}}</text>
                  <text class="unit">万支</text>
                </view>
                <view class="desc">各单位外流量</view>
              </view>
              <view class="item">
                <view>
                  <text class="num">{{reportDatas.tmbxwll}}</text>
                  <text class="unit">万支</text>
                </view>
                <view class="desc">条码不祥外流量</view>
              </view>
            </view>
            <view id="chartBox" style="width: 100%; height: 330rpx"></view>
          </view>
          <view class="card-box">
            <view class="title">外流卷烟数量排名TOP3</view>
            <view class="smoke-num-ranking">
              <view class="ranking">
                <view class="item">
                  <u-image src="/static/query/report/top_0.png" :width="100" mode="widthFix"></u-image>
                  <text class="name">{{reportDatas.wljyslpmtop1}}</text>
                </view>
                <view class="item">
                  <u-image src="/static/query/report/top_1.png" :width="100" mode="widthFix"></u-image>
                  <text class="name">{{reportDatas.wljyslpmtop2}}</text>
                </view>
                <view class="item">
                  <u-image src="/static/query/report/top_2.png" :width="100" mode="widthFix"></u-image>
                  <text class="name">{{reportDatas.wljyslpmtop3}}</text>
                </view>
              </view>
              <view class="total">
                <view class="item">
                  <text class="num">{{reportDatas.wlzl}}</text>
                  <text class="unit">万支</text>
                  <view class="desc">外流总量</view>
                </view>
                <view class="item">
                  <view class="num-box">
                    <text class="num">{{reportDatas.topThreeZB}}</text>
                    <text class="unit">%</text>
                    <u-image class="arrow-icon" v-if="reportDatas.topThreeZBsjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                    <u-image class="arrow-icon" v-if="reportDatas.topThreeZBsjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
                  </view>
                  <view class="desc">占比</view>
                </view>
              </view>
            </view>
          </view>
          <view class="card-box ">
            <view class="title">外流卷烟积分排名TOP3</view>
            <view class="num-ranking">
              <view class="item">
                <u-image src="/static/query/report/top_0.png" :width="100" mode="widthFix"></u-image>
                <view class="name">{{reportDatas.wljyjfpmtop1}}</view>
              </view>
              <view class="item">
                <u-image src="/static/query/report/top_1.png" :width="100" mode="widthFix"></u-image>
                <view class="name">{{reportDatas.wljyjfpmtop2}}</view>
              </view>
              <view class="item">
                <u-image src="/static/query/report/top_2.png" :width="100" mode="widthFix"></u-image>
                <view class="name">{{reportDatas.wljyjfpmtop3}}</view>
              </view>
            </view>
          </view>
          <view class="card-box">
            <view class="title">外流卷烟品规排名TOP10</view>
            <view class="smoke-ranking">
              <view class="item" v-for="(item, index) in reportDatas2" :key="index">
                <text class="ranking">{{item.rankNum}}</text>
                <view class="change num-box" :class="{red: item.rankNumsjFlag === '0', green: item.rankNumsjFlag === '1'}">
                  <text>{{ item.shangYueRankNum || '-' }}</text>
                  <u-image class="arrow-icon" v-if="item.rankNumsjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                  <u-image class="arrow-icon" v-if="item.rankNumsjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
                </view>
                <text class="name">{{ item.cigaName }}</text>
                <text class="total">{{ item.cigaOutflowNum }}</text>
                <view class="total">
                  <text class="weight"v-if="isNaN(Number(item.cigaOutflowHB))">{{ item.cigaOutflowHB }}%</text>
                  <text class="weight"v-else :class="Number(item.cigaOutflowHB) >= 0 ? '' :'red'">{{item.cigaOutflowHB}}%</text>
                  
                </view>
              </view>
            </view>
          </view>
          <view class="card-box">
            <view class="title">主要流向省份</view>
            <view class="province-ranking">
              <view class="item" v-for="(item, index) in reportDatas3" :key="index">
                <view class="province">
                  <view class="num">{{item.areaRankNum}}</view>
                  <view class="name">{{item.areaName}}</view>
                </view>
                <view class="total num-box">
                  <text class="num">{{item.outflowNum}}</text>
                  <u-image class="arrow-icon" v-if="item.outflowNumSjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                  <u-image class="arrow-icon" v-if="item.outflowNumSjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
                </view>
              </view>
              
            </view>
          </view>


        </view>
        <view v-show="outTabIndex === 1" class="tab-2-content">
          <view class="total-box" v-if="reportDatas2_1.length > 0">
            <view class="item">
              <view class="num-box">
                <text class="num">{{reportDatas2_1[0].inflowNum}}</text>
                <text class="unit">万吨</text>
              </view>
              <view class="desc">流入总量</view>
            </view>
            <view class="item">
              <view class="num-box">
                <text class="num">{{reportDatas2_1[0].tb}}</text>
                <text class="unit">%</text>
                <u-image class="arrow-icon" v-if="reportDatas2_1[0].tbsjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                <u-image class="arrow-icon" v-if="reportDatas2_1[0].tbsjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
              </view>
              <view class="desc">同比</view>
            </view>
          </view>
          <view class="card-box" v-if="reportDatas2_1.length > 0">
            <view class="title">各单位查获量分析</view>
            <view class="analysis">
              <view class="item">
                <view>
                  <text class="num">{{reportDatas2_1[0].gdwchl}}</text>
                  <text class="unit">万支</text>
                </view>
                <view class="desc">各单位查获量</view>
              </view>
              <view class="item">
                <view class="num-box">
                  <text class="num">{{reportDatas2_1[0].gdwchlTB}}</text>
                  <text class="unit">%</text>
                  <u-image class="arrow-icon" v-if="reportDatas2_1[0].gdwchlTBsjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                  <u-image class="arrow-icon" v-if="reportDatas2_1[0].gdwchlTBsjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
                </view>
                <view class="desc">同比</view>
              </view>
            </view>
            <view class="analysis">
              <view class="item">
                <view>
                  <text class="num">{{reportDatas2_1[0].tmbxlrl}}</text>
                  <text class="unit">万支</text>
                </view>
                <view class="desc">条码不详外流量</view>
              </view>
              <view class="item">
                <view class="num-box">
                  <text class="num">{{reportDatas2_1[0].tmbxlrlTB}}</text>
                  <text class="unit">%</text>
                  <u-image class="arrow-icon" v-if="reportDatas2_1[0].tmbxlrlTBsjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                  <u-image class="arrow-icon" v-if="reportDatas2_1[0].tmbxlrlTBsjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
                </view>
                <view class="desc">同比</view>
              </view>
            </view>
          </view>
          <view class="card-box " v-if="reportDatas2_1.length > 0">
            <view class="title">查获数量排名TOP3</view>
            <view class="num-ranking">
              <view class="item">
                <u-image src="/static/query/report/top_0.png" :width="100" mode="widthFix"></u-image>
                <view class="name">{{reportDatas2_1[0].chslpmtop1}}</view>
              </view>
              <view class="item">
                <u-image src="/static/query/report/top_1.png" :width="100" mode="widthFix"></u-image>
                <view class="name">{{reportDatas2_1[0].chslpmtop2}}</view>
              </view>
              <view class="item">
                <u-image src="/static/query/report/top_2.png" :width="100" mode="widthFix"></u-image>
                <view class="name">{{reportDatas2_1[0].chslpmtop3}}</view>
              </view>
            </view>
          </view>
          <view class="card-box">
            <view class="title">查获卷烟排名TOP10</view>
            <view class="smoke-ranking">
              <view class="item" v-for="(item, index) in reportDatas2_2" :key="index">
                <text class="ranking">{{item.rankNum}}</text>
                <view class="change num-box" :class="{red: item.rankNumsjFlag === '0' && item.shangYueRankNum, green: item.rankNumsjFlag === '1' && item.shangYueRankNum}">
                  <text>{{ item.shangYueRankNum || '-' }}</text>
                  <u-image class="arrow-icon" v-if="item.rankNumsjFlag === '1' && item.shangYueRankNum" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                  <u-image class="arrow-icon" v-if="item.rankNumsjFlag === '0' && item.shangYueRankNum" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
                </view>
                <text class="name">{{item.cigaName}}</text>
                <text class="total">{{item.cigaInflowNum}}</text>
                <view class="total">
                  <text class="weight"v-if="isNaN(Number(item.cigaInflowHB))">{{ item.cigaInflowHB }}%</text>
                  <text class="weight"v-else :class="Number(item.cigaInflowHB) >= 0 ? '' :'red'">{{item.cigaInflowHB}}%</text>
                </view>
              </view>
            </view>
          </view>
          <view class="card-box">
            <view class="title">查获卷烟主要省份</view>
            <view class="province-ranking">
              <view class="item" v-for="(item, index) in reportDatas2_3" :key="index">
                <view class="province">
                  <view class="num">{{item.areaRankNum}}</view>
                  <view class="name">{{item.areaName}}</view>
                </view>
                <view class="total num-box">
                  <text class="num">{{item.inflowNum}}</text>
                  <u-image class="arrow-icon" v-if="item.inflowNumSjFlag === '1'" src="/static/query/report/rise.png" :width="20" mode="widthFix"/>
                  <u-image class="arrow-icon" v-if="item.inflowNumSjFlag === '0'" src="/static/query/report/reduce.png" :width="20" mode="widthFix"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      
      <view class="tab-content" v-show="tabIndex === 1">
        <view class="report-box">
          <view class="item" v-for="(item, index) in reportList" :key="index" @click="gridClick(item)">
            <text>{{item.label}}</text>
            <!-- <view>
              <u-image class="img" src="/static/query/report/top_0.png" :width="80" mode="widthFix"></u-image>
            </view> -->
          </view>
        </view>
      </view>
      
      

    </view>
  </view>
</template>

<script> 
import * as echarts from "echarts";
import queryService from "@/service/query/query.service.js";

export default {
  components: { 
    
  },
  data() {
    return {
      tabIndex: 0,
      outTabIndex: 0,
      userInfo: this.$store.state.userInfo,
      reportList: [{
        label: "市公司外流卷烟排名情况",
        url: "/pages/query/report/outSmokeRanking"
      }, {
        label: "全省卷烟外流分类占比情况",
        url: "/pages/query/report/outSmokeCategory"
      }, {
        label: "全省外流前十名品规情况",
        url: "/pages/query/report/outSmokeProduct"
      }, {
        label: "全省外流前十名品规流向主要省份",
        url: "/pages/query/report/outSmokeProductProvince"
      }, {
        label: "全省外流前十名品规流出主要市公司",
        url: "/pages/query/report/outSmokeProductCompany"
      }, {
        label: "市公司外流卷烟前三名规格",
        url: "/pages/query/report/outSmokeProductSpec"
      }, {
        label: "查获我省外流卷烟主要省份",
        url: "/pages/query/report/outSmokeGetProvince"
      }, {
        label: "全省查获省外流入情况",
        url: "/pages/query/report/inSmoke"
      }, {
        label: "全省查获卷烟前十名品规",
        url: "/pages/query/report/outSmokeGetProduct"
      }, {
        label: "全省查获卷烟外流主要省份",
        url: "/pages/query/report/outSmokeGetProvince2"
      }, ],
      reportDatas: {},
      reportDatas2: [],
      reportDatas3: [],
      reportDatas2_1: [],
      reportDatas2_2: [],
      reportDatas2_3: [],
    };
  }, 
  // 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
  mounted() {
    this.getMobileHReportDatas({
      reportCode: "INTERNAL_HOME_OVERVIEW1",
      reportName: "内管首页总览1",
      reportParas: {
        compositionName: "",
        orgLevel: this.userInfo.orgLevel
      }
    }, 'reportDatas')
    this.getMobileHReportDatas({
      reportCode: "INTERNAL_HOME_OVERVIEW1_2",
      reportName: "内管首页总览1中间部分",
      reportParas: {
      }
    }, 'reportDatas2')
    this.getMobileHReportDatas({
      reportCode: "INTERNAL_HOME_OVERVIEW1_3",
      reportName: "内管首页总览1下半部分",
      reportParas: {
      }
    }, 'reportDatas3')

    this.getMobileHReportDatas({
      reportCode: "INTERNAL_HOME_OVERVIEW2-1",
      reportName: "内管首页总览2上半部分",
      reportParas: {
      }
    }, 'reportDatas2_1')
    this.getMobileHReportDatas({
      reportCode: "INTERNAL_HOME_OVERVIEW2-2",
      reportName: "内管首页总览2查获卷烟品规排名top10",
      reportParas: {
      }
    }, 'reportDatas2_2')
    this.getMobileHReportDatas({
      reportCode: "INTERNAL_HOME_OVERVIEW2-3",
      reportName: "内管首页总览2查获卷烟主要省份top10",
      reportParas: {
      }
    }, 'reportDatas2_3')
    
  },
  methods: {
    gridClick(item){
      this.setRouteParam(item.label);
      this.$u.route(item.url);
    },

    initChart(data) {
      let chart = echarts.init(document.getElementById("chartBox"));
      let option = {
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [20, 60],
            center: ["60%", "50%"],
            label: {
                show: false
            },
            data: [
              {
                value: this.reportDatas.gdwwll,
                itemStyle: {
                  color: "#008CFF"
                },
                
              },
              {
                value: this.reportDatas.tmbxwll,
                itemStyle: {
                  color: "transparent",
                },
              },
            ],
          },
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 50],
            center: ["60%", "50%"],
            data: [
              {
                value: this.reportDatas.gdwwll,
                itemStyle: {
                  color: "transparent",
                },
              },
              {
                value: this.reportDatas.tmbxwll,
                itemStyle: {
                  color: "#00C98D"
                },
                label: {
                  color: "#393B3D",
                  fontSize: 14,
                  formatter: `{a|${this.reportDatas.bxwlzb}}%\n不详外流占比`,
                  minMargin: 5,
                  edgeDistance: 10,
                  rich: {
                    a: {
                      color: "#000",
                      fontSize: 20,
                      lineHeight: 30,
                      fontWeight: 600
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      chart.setOption(option);
      
    },
    getMobileHReportDatas(param, dataKey){

      queryService.report.getMobileHReportDatas(param).then(res => {
        this.$modal.hideLoading();
        if (res.success) {
          
          if(dataKey === 'reportDatas') {
            this[dataKey] = res.data?.[0]?.commonDetailList?.[0] || {};
            this.initChart();
          } else {
            this[dataKey] = res.data?.[0]?.commonDetailList || [];
          }
        } else {
          this.$u.toast(res.msg);
        }
      }).catch(e => {
        this.$modal.hideLoading();
        console.log(e);
        this.$u.toast('查询失败');
      })
    }

  },
};
</script>

<style lang="scss" scoped>

.report-index{
  padding: 0 40rpx;
  .tab-content{
    padding-bottom: 60rpx;
    .num-box{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .arrow-icon{
      margin-left: 4rpx;
    }
    .topArrow{
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #00C98D;;
      margin-left: 6rpx;
    }
    .bottomArrow{
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid red;
      margin-left: 6rpx;
    }
  }
  .tab{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24rpx;
    background-color: #0070D2;
    height: 88rpx;
    margin: 0 -40rpx;
    .tab-item{
      margin: 0 24rpx;
      color: #fff;
      flex: 1;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;

      &.active{
        background: #fff;
        color: #0070D2;
        
      }
    }
  }
  .tab-2{
    margin-top: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EDF1F4;
    overflow: hidden;
    border-radius: 20rpx;
    .tab-item{
      color: #393B3D;
      height: 88rpx;
      line-height: 88rpx;
      flex: 1;
      text-align: center;
      &.active{
        background: linear-gradient(#12A6FE, #027DE5);
        color: #fff;
      }
    }
  }
  .total-box{
    margin-top: 20rpx;
    background: linear-gradient(#C2E6FE, #fff);
    border-radius: 20rpx;
    height: 250rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .total{
      width: 100%;
      flex: auto !important;
    }
    .total,
    .item{
      flex: 1;
      text-align: center;
      
      .num{
        font-size: 40rpx;
        font-weight: bold;
      }
      .unit{
        font-size: 24rpx;
      }
      .desc{
        margin-top: 5rpx;
      }
    }
  }
  .card-box{
    margin: 30rpx -40rpx 0;
    padding: 30rpx 40rpx 0;
    border-top: 1px solid #E8EDF4;
    .title{
      position: relative;
      font-size: 30rpx;
      font-weight: 600;
      margin-bottom: 30rpx;
      padding-left: 30rpx;
      &::after{
        content: "";
        width: 0;
        height: 0;
        border-left: 16rpx solid #004CFE;
        border-bottom: 16rpx solid transparent;
        border-top: 16rpx solid transparent;
        position: absolute;
        top: 6rpx;
        left: 0;
      }
    }
  }
  .analysis{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E8EDF4;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    &:last-child{
      border-bottom: 0;
    }
    .item{
      text-align: center;
      flex: 1;
      .num{
        font-size: 40rpx;
        font-weight: bold;
      }
      .unit{
        font-size: 24rpx;
      }
      .desc{
        margin-top: 5rpx;
      }
    }
  }
  .num-ranking{
    display: flex;
    justify-content: center;
    .item{
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      .name{
      }
    }
  }
  .smoke-ranking{
    .item{
      display: flex;
      align-items: center;
      justify-content:space-between;
      padding: 20rpx;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      .weight{
        font-weight: bold;
      }
      .red{
        color: red;
      }
      .green{
        color: #00C98D;
      }
      .ranking{
        width: 40rpx;
      }
      .change{
        width: 80rpx;
      }
      .name{
        flex: 1;
      }
      .total{
        width: 120rpx;
        &:last-child{
          text-align: right
        }
      }
    }
  }
  .province-ranking{
    .item{
      display: flex;
      align-items: center;
      justify-content:space-between;
      padding: 20rpx;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      .province{
        display: flex;
        align-items: center;
        justify-content: center;
        .num{
          width: 50rpx;
          height: 50rpx;
          line-height: 50rpx;
          border-radius: 50%;
          font-weight: bold;
          margin-right: 20rpx;
          background-color: #DCEEFF;
          text-align: center;
        }
      }
      .total{
        font-weight: bold
      }
    }
  }
  .smoke-num-ranking{
    display: flex;
    justify-content: space-between;
    .ranking{
      flex: 1;
      .item{
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        &:first-child{
          margin-top: 0;
        }
      }
    }
    .total{
      flex: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .item{
        &:first-child{
          margin-bottom: 30rpx;
        }
        .num{
          font-size: 40rpx;
          font-weight: bold;
        }
        .unit{
          font-size: 24rpx;
        }
        .desc{
          margin-top: 5rpx;
        }
      }
      
    }
  }

  .report-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20rpx;
    .item{
      width: 49%;
      height: 190rpx;
      border: 1px solid #E8EDF4;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .img{
        float: right;
      }
    }
  }
}

</style>
